<div th:fragment="control_condition_select_select">
    <script type="text/javascript">
        /** 下拉框元数据 */
        function metadata_select_select(params) {
            var column = {
                optionName: "名称",
                optionValue: "值"
            };
            var option = {
                columns: [],
                sql: ""
            };
            option.columns.push($.extend({}, column));
            params = $.extend({}, {
                CONTROL_ID: "ID",
                OPTION: option,
                TITLE: {
                    TEXT: "TITLE"
                },
                SELECT_RANGE: {
                    TYPE: "1",
                    RANGE: 1
                },
                COLUMNS: {
                    column: column
                },
                SELECT_SQL: ""
            }, params);
            return $.extend(new metadata_base(params), this);
        }

        /** 下拉框 元数据视图 面板视图 */
        function metadata_view_select_select(control) {
            this.control = control;
            this.OPTION = function () {
                var _this = this;
            }
            this.CONTROL_ID = function () {
                var metadataName = "CONTROL_ID";
                var view = $($("#" + metadataName).html());
                var metadata = this.control.getMetadata();
                var _this = this;
                var mValue = metadata[metadataName];
                $(view).find("input").val(mValue).keyup(function () {
                    metadata[metadataName] = $(this).val();
                    _this.linkageMetadata(metadataName, $(this).val());
                }).popoverBind();
                $(this.settingPanel).append(view);
            }
            this.TITLE = function () {
                var metadataName = "TITLE";
                var view = $($("#SELECT_TITLE").html());
                var metadata = this.control.getMetadata();
                var _this = this;
                var mValue = metadata[metadataName];
                $(view).find("input").val(mValue.TEXT).on({
                    keyup: function () {
                        mValue.TEXT = $(this).val();
                        _this.linkageMetadata(metadataName, mValue);
                    }
                }).popoverBind();
                $(this.settingPanel).append(view);
            }
            this.SELECT_RANGE = function () {
                var metadataName = "SELECT_RANGE";
                var view = $($("#" + metadataName).html());
                var option = this.control.getMetadata("OPTION");
                var metadata = this.control.getMetadata();
                var _this = this;
                var mValue = metadata[metadataName];
                if (mValue) {
                    $(view).find("select")
                        .val(mValue.TYPE)
                        .change(
                            function () {
                                var type_value = $(this).val();
                                if (type_value == 1) {
                                    $(".select-option").hide();
                                    option.columns = [];
                                    $(".select-sql").show();
                                } else if (type_value == 2) {
                                    $(".select-sql").hide();
                                    option.sql = "";
                                    console.log($(".select-sql").find("textarea"));
                                    $(".select-sql").find("textarea").val('');
                                    if(option.columns.length>0 && option.columns.length > $(".select-option").find("tbody").find("tr").length){
                                        $.each(option.columns, function (index,item) {
                                            if(index!=0) {
                                                var column_view = $($("#COLUMN").html());
                                                column_view.find("input[name=optionName]").val(item["optionName"]);
                                                column_view.find("input[name=optionValue]").val(item["optionValue"]);
                                                $(".select-option").find("tbody").append(column_view);
                                            }
                                        });
                                    }
                                    $(".select-option").show();
                                }
                                metadata[metadataName].TYPE = type_value;
                                var type_text = $(this).find(
                                    "option:selected").html();
                                $(view).find("span").html(type_text);
                            }).popoverBind();
                    $(view).find("input").val(mValue.RANGE).keyup(function () {
                        metadata[metadataName].RANGE = $(this).val();
                    }).popoverBind();
                }
                $(this.settingPanel).append(view);
            }
            this.SELECT_SQL = function () {
                var metadataName = "SELECT_SQL";
                var view = $($("#" + metadataName).html());
                var option = this.control.getMetadata("OPTION");
                var metadata = this.control.getMetadata();
                var _this = this;
                var mValue = metadata[metadataName];
                $(view).find("textarea").val(mValue).keyup(function () {
                    metadata.SELECT_SQL = $(this).val();
                    option.sql = $(this).val();
                }).popoverBind();
                $(this.settingPanel).append(view);
            }
            this.COLUMNS = function () {
                var _this = this;
                var view = $($("#COLUMNS").html());
                var option = this.control.getMetadata("OPTION");
                var column = $.extend({}, this.control.getMetadata("COLUMNS").column);
                var columns = option.columns;
                var setColumns = function (column) {
                    var column_view = $($("#COLUMN").html());
                    column_view.find("input[name=optionName]").val(column.optionName);
                    column_view.find("input[name=optionValue]").val(column.optionValue);
                    column_view.find(".form-control").on("keyup change", function () {
                        console.log($(this).parents("tr").index(),columns[$(this).parents("tr").index()]);
                    });
                    view.find("table").append(column_view);
                }

                view.on("focus", "input", function () {
                    $(this).popover("show");
                });
                view.on("blur", "input", function () {
                    $(this).popover("hide");
                });
                //增加列
                view.find(".add-btn").click(function () {
                    option.columns.push($.extend({}, column));
                    setColumns(column);
                });
                //删除列
                view.on("click", ".delete-btn", function () {
                    var index = $(this).index(".delete-btn");
                    option.columns.splice(index, 1);
                    $(this).parents("tr").remove();
                });
                this.settingPanel.append(view);
                $(".select-option").hide();
            }
            return $.extend(new metadata_view_base(control), this);
        }

        /** 下拉框 表单视图 */
        function metadata_form_view_select_select(control) {
            this.CONTROL_ID = function (value) {
                $(this.control).find(".list").attr("id", value);
            }
            this.TITLE = function (value) {
                $(this.control).find(".label-text").html(value.TEXT);
            }
            return $.extend(new metadata_view_base(control), this);
        }

    </script>

    <!-- 控制面板 下拉控件 标题 -->
    <script type="text/html" id="CONTROL_ID">
        <div class="form-setting-group">
            <div class="controls">
                <label>控件ID<input data-content="该控件的唯一ID" data-trigger="manual"></label>
            </div>
        </div>
    </script>

    <!-- 控制面板  下拉框 标题-->
    <script type="text/html" id="SELECT_TITLE">
        <div class="form-setting-group">
            <div class="controls">
                <label>控件标题<input data-content="该控件的标题名称" data-trigger="manual"></label>
            </div>
        </div>
    </script>

    <!-- 控制面板 列基本配置 -->
    <script type="text/html" id="COLUMNS">
        <div class="form-setting-group select-option">
            <table class="setting-control-table">
                <tr>
                    <td class="setting-control-label100">选项名称</td>
                    <td class="setting-control-label100">选项值</td>
                    <td><a href="javascript:;" class="btn btn-default btn-sm add-btn" style="width:100px;">增加选项</a></td>
                </tr>
            </table>
        </div>
    </script>

    <!-- 控制面板 列详细配置 -->
    <script type="text/html" id="COLUMN">
        <tr class="column">
            <td><input name="optionName" class="form-control" data-content="选项名称" data-trigger="manual"
                       data-placement="left"></td>
            <td><input name="optionValue" class="form-control" data-content="选项值/代码" data-trigger="manual"
                       data-placement="left"></td>
            <td><a href="javascript:;" class="btn btn-default btn-sm delete-btn" style="width:100px;">删除选项</a></td>
        </tr>
    </script>

    <!-- 控制面板  下拉控件 动态/静态-->
    <script type="text/html" id="SELECT_RANGE">
        <div class="form-setting-group">
            <div class="controls">
                <label>动态/静态</label>
                <select id="selectKj" class="selectKj" data-content="选择该控件的是动态/静态" data-trigger="manual"
                        style="width:60px;height:30px;">
                    <option value="1">动态</option>
                    <option value="2">静态</option>
                </select>
            </div>
        </div>
    </script>

    <!-- 控制面板  下拉框 SQL-->
    <script type="text/html" id="SELECT_SQL">
        <div class="form-setting-group select-sql">
            <div class="controls">
                <label>SQL</label><br>
                <textarea class="form-setting-sql" data-content="对应的查询结果SQL语句" data-trigger="manual"
                          data-placement="top"></textarea>
            </div>
        </div>
    </script>

</div>

